<template>
	<view class="return-detail">
		<NavBar title="填写退货物流" :isBack="true"></NavBar>
		<view class="content">
			<!-- s -->
			<view class="header">
				<view class="line">
				</view>
				<view class="title">
					退款信息
				</view>
			</view>
			<!-- e -->
			<view class="top-area">
				<view class="goods-msg">
					<image class="goods-img" src="@/static/goodDetail/demo.png"></image>
					<view class="specific-msg">
						<view class="title">
							<view>车载新风净化器</view>
						</view>
						<view class="order-num">卜公英（方形）30g玻璃瓶【买1送1】</view>
						<view class="control">
							<view class="price">¥ 129</view>
							<view class="num">
							  x 1
							</view>
						</view>
					</view>
				</view>
			</view>	
			
			
			<!-- s -->
			<view class="header">
				<view class="line">
				</view>
				<view class="title">
					邮寄信息
					<text class="comment">(请按下述地址将商品寄回)</text>
				</view>
			</view>
			<!-- e -->
			
			
             <!-- s -->
			 <view class="middle-area">
			 	<view class="configuration">
			 		<view class="row">
			 			<view class="left">收货人：</view>
			 			<view class="right">
			 		     张三
			 		    </view>
			 		</view>
					
					<view class="row">
						<view class="left">联系电话：</view>
						<view class="right">
					     189****4407
					    </view>
					</view>
					
					<view class="row">
						<view class="left">收货地址：</view>
						<view class="right">
					     **省***市***区***街道***号***园区***号楼***号
					    </view>
					</view>
					
					<view class="row">
						<view class="left">申请金额</view>
						<view class="right">
					      已与客户协商，申请退货退款
					    </view>
					</view>
					
					<view class="comment">
					 备注：请在售后卡或小纸条上填写您的下单账号，订单编号，联系电话，方便我们处理
					</view>	
			 	</view>
			 </view>
			 <!-- e -->
			 <!-- s -->
			 <view class="bottom-area">
			 	<view class="configuration">
			 		<view class="row">
			 			<view class="left">物流公司：</view>
			 			<view class="right select">
			 		      <view class="">
			 		      	请选择物流公司
			 		      </view>
						  <image src="@/static/goodDetail/back.png"></image>
			 		    </view>
			 		</view>
			 					
				<view class="row">
					<view class="left">物流单号：</view>
					<view class="right">
						<input  type="text" value="" placeholder="请填写物流单号" />
					</view>
				</view>		
			 	</view>
			 </view>
			 <!-- e -->
			 
			 
			<view class="footer-area">
				<view class="btn">
					确认提交
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>

</script>

<style lang="scss" scoped>
.return-detail {
	.content {
		position: relative;
		top: -40rpx;
		padding: 36rpx;
		margin-top: 56rpx;
        
		 .header {
			 display: flex;
			 align-items: center;
			 margin-bottom: 18rpx;
			 .line {
				width: 5rpx; 
				height: 36rpx;
				background-color:#58DBCF;
			    margin-right: 10rpx;
			 }
			 .title {
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;  
			 }
			 
			 .comment {
				 padding-roght:20rpx;
				font-size: 20rpx;
				color: #999999; 
			 }
		 }
		 
		.top-area {
			padding: 36rpx;
			background: #FFFFFF;
			border-radius: 22rpx 22rpx 22rpx 22rpx;
			margin-bottom: 36rpx;
			.goods-msg {
			display: flex;
			}

			.goods-img {
				width: 155rpx;
				height: 155rpx;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				margin-right: 24rpx;
			}
			.specific-msg {
				width: 440rpx;
			
				.title {
					display: flex;
					align-items: center;
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
				}
			
				.order-num {
					font-weight: 500;
					font-size: 20rpx;
					color: #999999;
					margin: 8rpx 0rpx 40rpx;		
				}
				
				.control {
					display: flex;
					align-items: center;
					justify-content: space-between;
					.price {
						font-weight: 800;
						font-size: 30rpx;
						color: #FF0000;
					}
			}
		}
}
      
    .middle-area {
		padding: 36rpx;
		background: #FFFFFF;
		border-radius: 22rpx 22rpx 22rpx 22rpx;
		margin-bottom: 36rpx;
		.configuration {
			 .row {
			display: flex;
			width: 100%;
			height: 45rpx;
			align-items: center;
			margin-bottom:12rpx;
			.right {
				font-size: 22rpx;
				color: #333333; 
			 }
			}
			.left{
			width: 150rpx;
			font-size: 22rpx;
			color: #333333; 
			}
			.comment {
				font-size: 20rpx;
				color: #999; 
			}
		}	
	}
	
.bottom-area {
	padding: 18rpx 36rpx 36rpx;
	background: #FFFFFF;
	border-radius: 22rpx 22rpx 22rpx 22rpx;
	margin-bottom: 36rpx;
	.configuration {
		.row:first-child{
			margin-bottom: 18rpx;
		}
		 .row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 18rpx;
		
	

		.right {
			font-size: 24rpx;
			color: #999999;
			input {
				font-size: 24rpx;
				color: #999999;
				text-align: right;
			}
			
		 }
		 
		 .select {
		  display: flex;
		  align-items: center;
		  justify-content: flex-end;
			 image{
			 	width: 14rpx;
			 	height: 24rpx;
				margin-left: 10rpx;
			 }
		 }
		
		}
		
		.left{
		padding-top: 0;
		font-weight: 500;
		
		font-size: 24rpx;
		color: #333333; 
		}
		
	}	
}
	

 .footer-area {
	 display: flex;
	 justify-content: flex-end;
	 gap: 10rpx;
	 .btn{
	 	text-align: center;
	 	width: 690rpx;
	 	height: 66rpx;
	 	line-height: 66rpx;
	 	background: #58DBCF;
	 	border-radius: 500rpx 500rpx 500rpx 500rpx;
	 	font-weight: 800;
	 	font-size: 30rpx;
	 	color:  #FFFFFF;
	 	margin-top: 84rpx;
	 }
 }

}
}
</style>

